<template>
    <view class="index-page">
        <!-- <view style="height: 45px"></view> -->
        <view v-if="tabIndex === 2">
            {{user}}
            {{userName}}
            {{userSex}}
        </view>
        <tab-bar>
            <template #common="{data}">
                {{ data }}
            </template>
            <template #about="{data}">
                {{ data }}
            </template>
            <template #mine="{data}">
                {{ data }}
            </template>
        </tab-bar>
    </view>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import TabBar from "@/components/tab-bar/tab-bar.vue";
import ScrollPage from "@/components/scroll-page/scroll-page";
export default {
    components: {
        TabBar,
        ScrollPage
    },
    computed: {
        ...mapGetters(['tabIndex', 'user', 'userName', 'userSex']),
        refresherStyle() {
            return {
                top: 0 - 45 + (this.offsetTop > 45 ? 45 : this.offsetTop) + "px",
                "min-height": (this.offsetTop < 45 ? 0 : this.offsetTop) + "px"
            };
        },
        refreshState() {
            if (this.loading) {
                return "正在刷新";
            } else if (this.offsetTop < 45) {
                return "下拉立即刷新";
            } else if (this.offsetTop >= 45) {
                return "释放立即刷新";
            } else {
                return "刷新成功";
            }
        }
    },
    data() {
        return {
            loading: false,
            offsetTop: 0
        };
    },
    mounted() {
        this.setTabs([
            {
                name: "首页",
                key: "home"
            },
            {
                name: "测试",
                key: "about"
            },
            {
                name: "我的",
                key: "mine"
            }
        ]);
    },
    methods: {
        ...mapActions(["setTabs"]),
        refresh(e) {
            if (e) {
                setTimeout(() => {
                    this.$refs["scroll-page"].loaded();
                }, 1000);
            }
        },
        scrolling(e) {
            // console.log(e);
        }
    }
};
</script>

<style></style>
